<template>

  <div class="container">
    <div class="m-header" id="m-header">
      <div @click="goback" class="m-return" id="m-return"></div>
      交易行
    </div>
    <div class="m-tab flex-row flex-y-center">
      <div @click="topNavClick" data-type="all"
           style="padding-right: 0.48rem" :class="{'active':type=='all'}"
           class="nav flex-grow-1 flex-y-center flex-right">
        全部商品
      </div>
      <div @click="topNavClick" data-type="my"
           data style="padding-left: .48rem"
           :class="{'active':type=='my'}" class="nav flex-grow-1 flex-y-center flex-left">
        我的商品<span>({{userNumber}}/8)</span>
      </div>
      <div class="slider" :class="[{'pull-left':type=='all'},{'pull-right':type=='my'}]"></div>
    </div>
    <div class="" v-if="type=='all'">
      <div id="m-view1" class="m-view1">
        <div class="classification flex-list">
          <div class="flex-grow-0"
               @click="chooseColor(index,item.type)"
               :class="{'active':index==colorcurrentindex}"
               v-for="(item,index) in colorList">
            {{item.name}}
          </div>
        </div>
        <!-- 搜索 -->
        <div class="search-box flex-row">
          <div class="icon-img">
            <img v-src="'/static/image/sousuo_icon@2x.png'" alt="">
          </div>
          <form action="." class="input-box" @submit.prevent="subMit">
            <input type="text" v-model="inputVal" placeholder="搜索字库">
          </form>
        </div>
      </div>
      <div class="give-or-take flex-y-center flex-row flex-right">
        <div class="Up-and-down-arrow flex-row-0">
          <img @click="upclick(1)" style="width: 0.28rem" v-src="'/static/image/shangshen_icon@2x.png'" alt="">
          <img @click="downclick(2)" style="width: 0.28rem;margin-left: 0.25rem" v-src="'/static/image/down.png'"
               alt="">
        </div>
      </div>
      <div class="list-item flex-row" @click="toDetails(item,item.id)" v-for="(item,index) in wordList">
        <div class="font-box flex-grow-0 flex-y-center flex-x-center"
             :class="[{zise:item.quality==4},{blue:item.quality==3},{green:item.quality==2},{white:item.quality==1}]">
          {{item.word}}
        </div>
        <div class="desc flex-grow-0">
          <p>当前最低价:￥{{item.min_money}}</p>
          <p>今日标准价:￥{{item.standard_price}}</p>
          <p>历史最低价:￥{{item.minimum}}</p>
          <p>历史最高价:￥{{item.maximum}}</p>
          <p>商品总数:￥{{item.z_number}}</p>
          <!--<p class="red" v-if="type==2">您的售价:￥23.75</p>-->
          <!--<p class="red" v-if="type==2">剩余时间:已下架</p>-->
        </div>
        <div class="imgBox flex-grow-0">
          <div class="" style="margin-top: 0.31rem">
            <img v-if="item.gain>0" style="width: 0.28rem" v-src="'/static/image/shangshen_icon@2x.png'" alt="">
            <img v-else style="width: 0.28rem" v-src="'/static/image/down.png'" alt="">
          </div>
        </div>
        <div class="rightbox flex-grow-1 flex-right">
          <div class="shoucanbox" style="margin-top: 0.24rem" @click.stop="clickshoucang(item.id,item.follow)">
            <img v-if="item.follow==0" style="width: 0.69rem" v-src="'/static/image/shoucang_icon@2x.png'" alt="">
            <img v-if="item.follow==1" style="width: 0.69rem" v-src="'/static/image/shoucangok@2x.png'" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="" v-if="type=='my'">
      <div class="my-desc">注：每个用户最多只能同时上架8个商品，合并出售需要下架后重新出售</div>
      <div class="list-item flex-row" v-for="(item,index) in myWordList">
        <div class="font-box flex-grow-0 flex-y-center flex-x-center"
             :class="[{zise:item.details.quality==4},{blue:item.details.quality==3},{green:item.details.quality==2},{white:item.details.quality==1}]">
          {{item.details.word}}
          <span class="number-show">{{item.number}}</span>
        </div>
        <div class="desc flex-grow-0">
          <p>当前最低价:￥{{item.details.min_money}}</p>
          <p>今日标准价:￥{{item.details.standard_price}}</p>
          <p>历史最低价:￥{{item.details.minimum}}</p>
          <p>历史最高价:￥{{item.details.maximum}}</p>
          <p>商品总数:￥{{item.details.z_number}}</p>
          <p class="red" v-if="type=='my'">您的售价:￥{{item.money}}</p>
          <p class="red" style="width: 3rem" v-if="type=='my'">剩余时间:<count-down :end-time="item.shelf_time"></count-down></p>
          <!--已下架-->
        </div>
        <div class="imgBox flex-grow-0">
          <div class="" style="margin-top: 0.31rem">
            <img v-if="item.details.gain>0" style="width: 0.28rem" v-src="'/static/image/shangshen_icon@2x.png'" alt="">
            <img v-else style="width: 0.28rem" v-src="'/static/image/down.png'" alt="">
          </div>
        </div>
        <div class="rightbox flex-grow-1 flex-right">
          <div v-if="type=='all'" class="shoucanbox" style="margin-top: 0.24rem">
            <img style="width: 0.69rem" v-src="'/static/image/shoucang_icon@2x.png'" alt="">
          </div>
          <div v-if="type=='my'" class="changebtnbox flex-grow-0">
            <button @click="changebtn(item)" class="changebtn">改价</button>
            <button v-if="item.status==1" @click="xiajiabtn(item.details.id)" class="shangjabtn">下架</button>
            <button @click="changebtn(item)" v-if="item.status==2" class="shangjabtn">重新上架</button>
          </div>
        </div>
      </div>
    </div>

    <!--出售弹框-->
    <div v-if="showSell==true" class="black_overlay"></div>
    <div v-if="showSell" class="white_content white_content2">
      <!-- 弹框内容 -->
      <div class="quantity">
        <div class="possess flex-row">
          <div class="font-box flex-grow-0 flex-y-center flex-x-center"
               :class="[{zise:trandeLineWordDetials.details.quality==4},{blue:trandeLineWordDetials.details.quality==3},{green:trandeLineWordDetials.details.quality==2},{white:trandeLineWordDetials.details.quality==1}]">
            {{trandeLineWordDetials.details.word}}
          </div>
          <div class="text-desc flex-y-bottom">拥有:{{trandeLineWordDetials.user_word_number}}</div>
        </div>
      </div>

      <div class="subtract flex-row">
        <div @click="sale_click_zui_xiao" class="minimum  flex-grow-0 flex-x-center flex-y-center">
          最小
        </div>
        <div class="countbox flex-grow-0 flex-y-center">
          <div @click="sale_click_jian" class="left-jian commen flex-grow-0 flex-x-center flex-y-center">
            -
          </div>
          <div class="number-one">
            {{saleCount}}
          </div>
          <div @click="sale_click_jia" class="right-jia commen flex-grow-0 flex-x-center flex-y-center">
            +
          </div>
        </div>
        <div @click="sale_click_zui_da" class="maximum flex-grow-0 flex-x-center flex-y-center">
          最大
        </div>
      </div>

      <div class="subtract2 flex-row">
        <div @click="salePrice_zui_xiao" class="minimum  flex-grow-0 flex-x-center flex-y-center">
          最小
        </div>
        <div class="countbox2 flex-grow-0 flex-y-center">
          <div @click="salePrice_jian" class="left-jian2 commen2 flex-grow-0 flex-x-center flex-y-center">
            -5%
          </div>
          <div class="number-one2">
            {{salePrice | getCount}}
          </div>
          <div @click="salePrice_jia" class="right-jia2 commen2 flex-grow-0 flex-x-center flex-y-center">
            +5%
          </div>
        </div>
        <div @click="salePrice_zui_da" class="maximum flex-grow-0 flex-x-center flex-y-center">
          最大
        </div>
      </div>

      <div class="timeTitle">上架时间</div>

      <div class="chooseTimBeox flex-row">
        <div class="time flex-x-center flex-y-center" @click="timeChoose(index)"
             :class="{'active':index == currentTimeIndex}" v-for="(item,index) in timeList">{{item}}小时
        </div>
        <!--<div class="time active flex-x-center flex-y-center">12小时</div>-->
        <!--<div class="time timeCenter flex-x-center flex-y-center">24小时</div>-->
        <!--<div class="time flex-x-center flex-y-center">48小时</div>-->
      </div>

      <div class="average flex-grow-0 flex-y-center flex-x-center" @click="user_sale">出售</div>
      <p class="selldesc">注：出售价格只能为当日标准价格+/-25%
        出售成功后，平台会收取5%手续费</p>
      <div @click="cancleClick" class="cancel flex-grow-0 flex-y-center flex-x-center">
        ×
      </div>
    </div>

    <div class="no_data" v-if="show_no_data">----暂无相关数据----</div>

  </div>

</template>

<script>
  document.title = '交易行';
  import {GETTRADELINELIST, GETMYTRANDELIST, ISCOLLECTION, USER_XIA_JIA, USER_SALE} from 'src/const/uri'
  import CountDown from 'src/components/countDown';
  import {bodyScroll} from "../assets/js/md-utils";

  export default {
    name: "tradeLine",
    components:{CountDown},
    data() {
      return {
        colorList: [
          {name: '白色', type: 1},
          {name: '绿色', type: 2},
          {name: '蓝色', type: 3},
          {name: '紫色', type: 4},
          {name: '我的收藏', type: 5}
        ],
        colorcurrentindex: 0,
        type: 'all',
        colorType: 1,
        gain: '',
        wordList: [],
        myWordList: [],
        userNumber: '',
        inputVal: '',
        showSell: false,
        trandeLineWordDetials: {},
        salePrice: '',
        saleCount: 1,
        timeList: [12, 24, 48],
        currentTimeIndex: 0,
        show_no_data: false
      }
    },
    watch: {
      wordList(val) {
        if (val.length > 0 && val) {
          this.show_no_data = false
        } else {
          this.show_no_data = true
        }
      },
      myWordList(val) {
        if (val.length > 0 && val) {
          this.show_no_data = false
        } else {
          this.show_no_data = true
        }
      }
    },
    mounted() {
      this.initData();
    },
    methods: {
      initData() {
        this.$ajax.get(GETTRADELINELIST, {
          type: this.colorType,
          gain: this.gain,
          word: this.inputVal
        }).then(res => {
          this.userNumber = res.data.user_number;
          this.wordList = res.data.word_list;
          // console.log(res.data.word_list)
        })
      },
      getMyWordList() {
        this.$ajax.get(GETMYTRANDELIST, {}).then(res => {
          this.myWordList = res.data;
          console.log(res.data);
        })
      },
      chooseColor(index, type) {
        this.colorcurrentindex = index;
        this.colorType = type;
        this.gain = '';
        this.inputVal = '';
        this.initData();
      },
      topNavClick(e) {
        // console.log(this.type);
        if (e.target.dataset.type) {
          this.type = e.target.dataset.type;
          if (this.type == 'all') {
            this.initData()
          } else {
            this.getMyWordList();
          }
        }
      },
      upclick(number) {
        this.gain = number;
        this.initData()
      },
      downclick(number) {
        this.gain = number;
        this.initData()
      },
      //收藏
      clickshoucang(id, follow) {
        console.log(follow)
        this.$ajax.get(ISCOLLECTION, {
          word_id: id
        }).then(res => {
          if (follow == 0) {
            this.$vux.toast.text('收藏成功')
          } else if (follow == 1) {
            this.$vux.toast.text('已取消收藏')
          }
          this.initData();
        });
      },
      subMit() {
        if (this.inputVal) {
          this.initData()
        } else {
          this.$vux.toast.text('请输入要搜索的文字')
        }

      },

      sale_click_jian() {
        if (this.saleCount > 1) {
          this.saleCount--;
        } else {
          return false;
        }
      },
      sale_click_jia() {
        if (this.saleCount < this.trandeLineWordDetials.user_word_number) {
          this.saleCount++;
        } else {
          return false;
        }
      },
      sale_click_zui_xiao() {
        this.saleCount = 1;
      },
      sale_click_zui_da() {
        this.saleCount = this.trandeLineWordDetials.user_word_number;
      },
      salePrice_jian() {
        if (this.salePrice > this.trandeLineWordDetials.details.standard_price * 0.75) {
          this.salePrice = this.salePrice * 0.95
        }

      },
      salePrice_jia() {
        if (this.salePrice < this.trandeLineWordDetials.details.standard_price * 1.25) {
          this.salePrice = this.salePrice * (1 + 0.05)
        }
      },
      salePrice_zui_xiao() {
        this.salePrice = this.trandeLineWordDetials.details.standard_price * 0.75;
      },
      salePrice_zui_da() {
        // console.log(this.wordDetails.standard_price);
        // if(this.salePrice<this.wordDetails.standard_price*(1.25)){
        //

        // }
        this.salePrice = this.trandeLineWordDetials.details.standard_price * 1.25;
      },
      timeChoose(index) {
        this.currentTimeIndex = index;
      },
      user_sale() {
        // console.log(this.saleCount);
        // console.log(this.salePrice);
        // console.log(this.timeList[this.currentTimeIndex]);
        this.$ajax.post(USER_SALE, {
          font_id: this.trandeLineWordDetials.font_id,//当前文在所在的交易行id
          id: this.trandeLineWordDetials.id,
          number: this.saleCount,
          money: parseFloat(this.salePrice).toFixed(2),
          duration: this.timeList[this.currentTimeIndex]
        }).then(res => {
          if (res.code == 1) {
            let that = this;
            this.showSell = false;
            this.$vux.alert.show({
              content: '恭喜您出售成功',
              onHide() {
                that.getMyWordList();
                bodyScroll.move();
                // window.history.go(-1)
              }
            });
          } else if (res.code == 0) {
            this.$vux.toast.text(res.msg)
          }
        });
      },
      cancleClick() {
        this.showSell = false;
        bodyScroll.move();
      },
      changebtn(item) {
        this.showSell = true;
        // console.log(item);
        this.trandeLineWordDetials = item;
        this.saleCount = item.number;
        this.salePrice = item.money;
        bodyScroll.stop()

      },
      // shangjabtn() {
      //   this.showSell = true
      // },
      xiajiabtn(id) {
        console.log(id);
        this.$ajax.get(USER_XIA_JIA, {
          word_id: id
        }).then(res => {
          console.log(res);
          this.$vux.toast.text(res.msg);
          this.getMyWordList()
        })
      },
      goback() {
        window.history.go(-1)
      },
      //省略2位
      getCount(number) {
        var n = 2;
        var num = "" + number;
        if (num.substring(num.indexOf(".") < 0 ? 0 : num.indexOf(".")).length <= n) {
          return number;
        }

        n = n ? parseInt(n) : 0;
        if (n <= 0) return Math.round(number);
        number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n);
        return number;
      },
      toDetails(item, id) {
        if (item) {
          window.sessionStorage.setItem('zm_wordDetails', JSON.stringify(item));
        }
        let beforeUrl = document.URL.replace(/tradeLine/g, "details").split('?')[0];
        let toUrl = `${beforeUrl}?id=${id}`;
        //window.location.href = location.origin + '/houseDetails.html?id=' + id;
        window.location.href = toUrl
      }
    }
  }
</script>
<style>
  body {
    background: #e1e1e1;
  }
</style>
<style scoped lang="less">
  @import "../style/tradeLine.css";
</style>
